<template>
	<view class="container">
		<!-- 收藏 -->
		<view class="list">
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<view class="avatar-box">
					<image style="width: 72rpx;height: 72rpx;border-radius: 50%;" :src="item.f_user_avatar" mode="">
					</image>
				</view>
				<view class="center-box">
					<view class="name">
						{{item.f_nick_name}}
					</view>
					<view class="content">
						{{item.content}}
					</view>
					<view class="date-box">
						<text>{{item.created_time_str}}</text>
						<!-- <text class="btn-reply">回复</text> -->
					</view>
				</view>
				<view style="flex-shrink: 0;width: 50px;">
					<u-image @click="onJumpDetail(item)" width="50" height="50" radius="10"
						:src="item.url" :lazy-load="true"></u-image>
				</view>
			</view>
			<cu-empty tips="暂时没有数据~" v-if="listData && listData.length == 0"></cu-empty>
			<u-loadmore v-else :status="refreshStatus" />
		</view>
	</view>
</template>

<script>
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		data() {
			return {
				listData: null,
			}
		},
		onLoad() {
			this.getList(false)
		},
		methods: {
			// 跳转帖子详情
			onJumpDetail(item){
				this.$Jump.Open('/pages/index/postDetail?id='+item.target_id+'&type=1')
			},
			getList(status) {
				this.$Net.get(this.$api.user_msg_list, {
					...this.searchReq,
					type: 4 //1提醒，2评论，3点赞，4收藏，5关注，6系统消息
				}, 1).then(res => {
					res.list.map(item => {
						let itemData = item.data;
						if (itemData) {
							if (itemData.cover) {
								item['url'] = itemData.cover;
							} else if (itemData.imgs) {
								item['url'] = itemData.imgs.split(",")[0];
							} else {
								item['url'] = ''
							}
						} else {
							item['url'] = ''
						}
					})
					this.setStatus(res.count, res.list, status);
				}).catch(() => {})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 24rpx;

		.list {

			.list-item {
				width: 686rpx;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;

				.avatar-box {
					width: 72rpx;
					height: 72rpx;
					border-radius: 72rpx;
					margin-right: 14rpx;
				}

				.center-box {
					flex: 1;
					width: 0;
				}

				.name {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 6rpx;
				}

				.content {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-weight: 400;
					margin-bottom: 10rpx;
					word-break: break-all;
				}

				.date-box {
					color: rgba(0, 0, 0, 0.40);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;

					.btn-reply {
						color: rgba(0, 0, 0, 0.80);
						font-family: "PingFang SC";
						font-size: 28rpx;
						font-weight: 400;
						margin-left: 16rpx;
					}
				}

				.cover {
					flex-shrink: 0;
					background-color: #f1f1f1;
				}

			}
		}

	}
</style>
